<template>
  <my-upload field="photo"
             @crop-success="cropSuccess"
             @crop-upload-success="cropUploadSuccess"
             @crop-upload-fail="cropUploadFail"
             v-model="uploadPhoto.show"
             :width="200"
             :height="200"
             :url="url"
             :params="params"
             :headers="headers"
             img-format="png">
    <img :src="imgDataUrl">
  </my-upload>
</template>

<script>
import 'babel-polyfill'; // es6 shim
import myUpload from 'vue-image-crop-upload/upload-2.vue';

export default {
  name: "UploadImage",
  props: {
    uploadPhoto: {type: Object, default: null},
    url: {type: String, default: ""},
    params: {type: Object, default: null},
  },
  created: function () {
  },
  data: function () {
    return {headers: {}, imgDataUrl: ""};
  },
  components: {myUpload},
  methods: {
    toggleShow() {
      this.show = !this.show;
    },

    cropSuccess(imgDataUrl, field){
      console.log('-------- crop success --------');
      this.imgDataUrl = imgDataUrl;
    },

    cropUploadSuccess(jsonData, field){
      console.log('-------- upload success --------');
      this.$emit("change")
      console.log(jsonData);
      console.log('field: ' + field);
    },

    cropUploadFail(status, field){
      console.log('-------- upload fail --------');
      console.log(status);
      console.log('field: ' + field);
    }
  }
}
</script>

<style scoped>

</style>